<template>
	<div class="main">
		<!-- 方块一 二 -->
		<div class="mians">
			<!-- 左边搜索栏 -->
			<div class="left">
				<button>查询内容</button>
				<input type="text" placeholder="请输入要搜索的的内容..."/>
			</div>
		</div>
		<!-- 左边轮播图 -->
		<div class="lefttu">
			<div class="swiper tabs1-swiper">
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<img src="../../../../public/img/12.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="../../../../public/img/11.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="../../../../public/img/8.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="../../../../public/img/7.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="../../../../public/img/1.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="../../../../public/img/2.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="../../../../public/img/3.jpg" />
					</li>
				</ul>
			</div>
		</div>
		<!-- 方块三 -->
		<div class="box2">
			<div class="one">
				<h4>好评最高5本书</h4>
				<ul>
					<li v-for="(item , index) in imgList" :key='index'>
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
						<p>{{item.name}}</p>
						<p>￥<span>{{item.price}}</span><button>购买</button></p>
					</li>
				</ul>
			</div>
			<div class="two">
				<h4>销量最高5本书</h4>
				<ul>
					<li v-for="(item , index) in imgList2" :key='index'>
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
						<p>{{item.name}}</p>
						<p>￥<span>{{item.price}}</span><button>购买</button></p>
					</li>
				</ul>
			</div>
		
		<!-- 方块四 -->
			<div class="three">
				<h4>意向最高5本书</h4>
				<ul>
					<li v-for="(item , index) in imgList3" :key='index'>
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
						<p>{{item.name}}</p>
						<p>￥<span>{{item.price}}</span><button>购买</button></p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {onMounted} from 'vue'
	//2.引入swiper动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Tabs1',
		data(){
			return{
				imgList:[],		//接收数据一
				imgList2:[],	//接收数据二
				imgList3:[],	//接收数据三
			}
		},
		created() {
			//发起异步请求1
			this.axios.get('/api/public/book/findFav5').then((res)=>{
				for(var i in res.data.data){
					this.imgList.push(res.data.data[i])
				}
				console.log(this.imgList)
			}).catch((error)=>{
				console.log(error)
			})
			//发起异步请求2
			this.axios.get('/api/public/book/findSale5').then((res)=>{
				for(var i in res.data.data){
					this.imgList2.push(res.data.data[i])
				}
			}).catch((error)=>{
				console.log(error)
			})
			//发起异步请求3
			this.axios.get('/api/public/book/findRate5').then((res)=>{
				for(var i in res.data.data){
					this.imgList3.push(res.data.data[i])
				}
			}).catch((error)=>{
				console.log(error)
			})
		},
		//4.设置应用swiper的位置以及具体操作
		setup(){
			onMounted(	()=>{
				new Swiper('.tabs1-swiper',{
					//循环播放
					loop:true,
					//设置分页器效果
					pagination :{
						el:'.banners-pagination'
					},
					//设置播放项：时间，不停止   手指经过不暂停自动
					autoplay :{
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction:true,
					}
				})
			})
		}
	}
</script>

<style scoped>
.mians{
	margin: 20px auto;
	background-color: aqua;
	width: 95%;
	border-radius: 15px;
	padding-bottom: 10px;
}
.tabs1-swiper ul li img{
	width: 30%;
	margin-left: 40rem;
	border-radius: 10px;
}
.mians .left button{
	width: 100px;
	border: none;
	background-color: aqua;
	border-radius: 20px;
	line-height: 30px;
	font-size: 20px;
	color: black;
	font-weight: bold;
	margin: 15px;
}
.mians .left  input{
	width: 300px;
	height: 50px;
	font-size: 20px;
	border: none;
	border-radius: 5px;
	text-indent: 1em;
}
.mians .lefttu{
	text-align: center;
}
.one{
	width: 95%;
	border-bottom: 2px solid orangered ;
	margin-left: 30px;
}
.one h4{
	font-size: 30px;
	color: aqua;
	margin: 20px 30px;
	font-weight: bold;
}
.one ul li{
	width: 10%;
	float: left;
	margin-top: 20px;
	text-align: center;
	display: block;
	margin-left: 8%;
}
.one ul li img{
	width: 150px;
	height: 180px;
	margin-bottom: 0.5rem;
}
.one p button{
	margin-left: 10px;
}
.two{
	width: 95%;
	border-bottom: 2px solid orangered ;
	margin-left: 30px;
	margin-top: 20rem;
}
.two h4{
	font-size: 30px;
	color: aqua;
	margin: 20px 30px;
	font-weight: bold;
}
.two ul li{
	width: 10%;
	float: left;
	margin-top: 20px;
	text-align: center;
	display: block;
	margin-left: 8%;
}
.two ul li img{
	width: 150px;
	height: 180px;
	margin-bottom: 1rem;
}
.two p button{
	margin-left: 10px;
}
.three{
	width: 95%;
	border-bottom: 2px solid orangered ;
	margin-left: 30px;
	margin-top: 18rem;
}
.three h4{
	font-size: 30px;
	color: aqua;
	margin-top: 20rem;
	margin-bottom: 2rem;
	margin-left: 2rem;
	display: block;
	font-weight: bold;
}
.three ul li{
	width: 10%;
	float: left;
	margin-top: 20px;
	text-align: center;
	display: block;
	margin-left: 8%;
}
.three ul li img{
	width: 150px;
	height: 180px;
	margin-bottom: 1rem;
}
.three p button{
	margin-left: 10px;
}
</style>
